<template>
  <view class='agreement-container'>
    <view class='agreement-content'>
      <view class='agreement-header'>
        <text class='main-title'>{{ config.appName }}业委会工作台平台服务订单</text>
        <view class='date-info'>
          <text>更新日期：2025年4月14日</text>
          <text>生效日期：2025年4月14日</text>
        </view>
      </view>
      
      <view class='agreement-body app-bottom-paddig'>
        <view class='section'>
          <text class='section-title'>一、服务内容、费用标准</text>
          <view class="table-grid">
            <!-- 表头 -->
            <view class="cell header" style="grid-row: 1; grid-column: 1;">产品名称</view>
            <view class="cell header" style="grid-row: 1; grid-column: 2;">服务项目</view>
            <view class="cell header" style="grid-row: 1; grid-column: 3;">功能项</view>
            <view class="cell header" style="grid-row: 1; grid-column: 4;">服务费</view>
            <!-- 产品名称大合并 -->
            <view class="cell product-name" style="grid-row: 2 / span 7; grid-column: 1; writing-mode: vertical-lr;">{{ config.appName }}业委会工作台</view>
            <!-- 基础功能合并，横排居中 -->
            <view class="cell func-type" style="grid-row: 2 / span 2; grid-column: 2; display: flex; align-items: center; justify-content: center;">基础功能</view>
            <view class="cell" style="grid-row: 2; grid-column: 3;">业主清册</view>
            <view class="cell" style="grid-row: 2; grid-column: 4;">小区可免费使用基础服务模块</view>
            <view class="cell" style="grid-row: 3; grid-column: 3;">小区公告</view>
            <view class="cell" style="grid-row: 3; grid-column: 4;">小区可免费使用基础服务模块</view>
            <!-- 高级功能合并，横排居中，rowspan=3 -->
            <view class="cell func-type" style="grid-row: 4 / span 3; grid-column: 2; display: flex; align-items: center; justify-content: center;">高级功能</view>
            <view class="cell" style="grid-row: 4; grid-column: 3;">业主大会投票</view>
            <view class="cell" style="grid-row: 4; grid-column: 4;">2元/户/年，每年2999元封顶，全年不限发起次数</view>
            <view class="cell" style="grid-row: 5; grid-column: 3;">调查问卷</view>
            <view class="cell" style="grid-row: 5; grid-column: 4;">限时免费</view>
            <view class="cell" style="grid-row: 6; grid-column: 3;">快速决议</view>
            <view class="cell" style="grid-row: 6; grid-column: 4;">限时免费</view>
            <view class="cell" style="grid-row: 7; grid-column: 3;">倡议书</view>
            <view class="cell" style="grid-row: 7; grid-column: 4;">限时免费</view>
            <view class="cell" style="grid-row: 8; grid-column: 3;">短信通知</view>
            <view class="cell" style="grid-row: 8; grid-column: 4;">0.1元/条（指通知业主投票、签字的短信）</view>
          </view>
        </view>

        <!-- 表格结束后插入费用说明文字（严格按txt原文） -->
        <view class="section">
          <view class="subsection">
            <text class="section-text"><text class="number">1.</text>若客户在原服务订单基础上增加购买小区户数，其计费规则为：付费金额=1户单价（天）*户数*剩余有效期（天），如增加户数后小区总户数达到1500户，则付费金额=（2999-现有付费户数*2）/365*剩余有效期（天）</text>
          </view>
          <view class="subsection">
            <text class="section-text"><text class="number">2.</text>服务费计费周期以年为单位，客户中途退出平台或暂停使用任意一项平台服务，已收取的平台服务费不予退还；但因法律规定解除协议的除外。</text>
          </view>
          <view class="subsection">
            <text class="section-text"><text class="number">3.</text>短信通知需预付款，单次充值不低于200元/次，按实际使用扣除费用，每次使用具体短信条数及费用平台应制成明细表提供给客户确认，客户确认后平台于预付款中扣除经双方确认的金额。</text>
          </view>
          <view class="subsection">
            <text class="section-text"><text class="number">4.</text>为提升服务质量，{{ config.appName }}可能不定期对产品及服务进行更新及升级，如产品升级内容涉及客户付费使用的功能模块，客户在协议期内可正常使用已付费的功能模块，无需额外支付费用；</text>
          </view>
          <view class="subsection">
            <text class="section-text"><text class="number">5.</text>后续若服务费标准有调整，在本协议约定服务期内客户可享受本协议约定的费用标准，超过本协议约定服务期，以{{ config.appName }}最新制定的服务标准为准。</text>
          </view>
          <view class="subsection">
            <text class="section-text"><text class="number">6.</text>本协议附件列明的基础服务模块，具体包括：业主清册、小区公告。上述服务无使用次数限制，不收取任何服务费，但不得用于商业目的或向第三方转售。</text>
          </view>
          <view class="subsection">
            <text class="section-text"><text class="number">7.</text>调查问卷、快速决议、倡议书三项服务自开通之日起提供限时免费使用，免费期限届满后自动转为收费服务，具体收费标准及生效时间以{{ config.appName }}平台届时书面通知为准；客户在接到通知后有权决定是否继续使用。客户未作出明确异议且继续使用的，视为同意新的收费标准。</text>
          </view>
        </view>

        <view class='section'>
          <text class='section-title'>二、售后服务标准及说明</text>
          <view class='table'>
            <view class='table-row table-header'>
              <view class='table-cell'>服务内容</view>
              <view class='table-cell'>内容及定义说明</view>
              <view class='table-cell'>响应时间</view>
            </view>
            <view class='table-row'>
              <view class='table-cell'>使用说明</view>
              <view class='table-cell'>提供功能的操作指引手册，针对重点功能进行讲解说明。</view>
              <view class='table-cell'>根据产品功能迭代适时修订。</view>
            </view>
            <view class='table-row'>
              <view class='table-cell'>在线答疑</view>
              <view class='table-cell'>针对平台使用上的存疑及使用误区，专人在线答疑讲解；若是使用过程中平台导致的问题，专人会完成内部跟进及优化。</view>
              <view class='table-cell'>简单问题30分钟内回复答疑，复杂问题2小时内回复答疑。常规工作时间：5天*8小时，星期一至星期五，不包括公众假日。</view>
            </view>
            <view class='table-row'>
              <view class='table-cell'>应急响应</view>
              <view class='table-cell'>应急响应是针对正在遭受网络攻击或疑似遭受网络攻击（包括但不限于服务器被入侵、恶意邮件投递、网页被篡改、受网络病毒影响等）的情况，通过平台、工具以及人力服务的方式，对攻击事件进行安全分析、发现原因。</view>
              <view class='table-cell'>法定工作日9:00-12:00和14:00-18:00内：1小时内响应。非前述时间内：4小时响应。当次服务结束后3个工作日内提交报告。紧急服务：提供7天*12小时支持。</view>
            </view>
          </view>
        </view>

        <!-- 售后服务标准及说明表格后插入不可抗力注释 -->
        <view class="section">
          <view class="subsection">
            <text class="section-text" style="color:#888;">注：因不可抗力、客户自身原因、第三方云服务及网络运营商故障等非平台可控原因导致的响应延迟，平台不承担违约责任。</text>
          </view>
        </view>

        <view class='section'>
          <text class='section-title'>三、服务内容选择及费用支付</text>
          <view class='subsection'>
            <text class=''><text class='number'>1.</text>本次订购服务内容及费用：</text>
            <view class='list-item'>
              <text class='list-text'>（常规购买）业主大会投票 购买年限__年 购买户数 ___户 付费金额 _______元</text>
              <text class='list-text'>（升级）业主大会投票户数升级 现有户数 ___ 户 新增户数 ___ 户 付费金额 ______元</text>
            </view>
          </view>
          
          <view class='subsection'>
            <text class=''><text class='number'>2.</text>生效日期：xxxx 年 xx 月 xx 日。</text>
          </view>
            <view class='subsection'>
            <text class=''><text class='number'>3.</text>服务期限：xxxx 年 xx 月 xx 日 至 xxxx 年 xx 月 xx 日。</text>
          </view>
          
          <view class='subsection'>
            <text class=''><text class='number'>4.</text>付款方式：</text>
            <view class='list-item u-flex flex-column u-col-top w-full'>
              <text>（1）口 微信付款</text>
              <text >（2）口 银行转账</text>
            </view>
          </view>
          
          <!-- <view class='subsection'>
            <text class=''><text class='number'>5.</text>收款账户信息：</text>
            <view class='list-item u-flex flex-column u-col-top w-full'>
              <text >开户名称：{{ config.companyName }}</text>
              <text >开户银行：招商银行深圳东门支行</text>
              <text >银行账号：755979105210001</text>
            </view>
          </view> -->
          
          <view class='subsection'>
            <text class=''><text class='number'>5.</text>发票信息：如客户需申请开具发票，可联系平台客服，让其协助开具发票。</text>
          </view>
          
          <view class='subsection'>
            <text class=''><text class='number'>6.</text>小区信息：</text>
            <view class='list-item u-flex flex-column u-col-top w-full'>
              <text >代表人姓名：</text>
              <text >代表人电话：</text>
              <text >代表人身份证号：</text>
            </view>
          </view>
        </view>

        <view class='section'>
          <text class='section-title'>企业信息</text>
          <view class='subsection'>
            <text class='section-text'>企业：{{ config.companyName }}</text>
            <!-- <text class='section-text'>联系人：{{ config.contactPerson }}</text> -->
            <view class='section-text u-flex'>联系电话：<span @click="callPhone">{{ config.contactPhone }}</span></view>
            <text class='section-text'>联系地址：{{ config.officeAddress }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { name, } from '@/util/config'
import companyInfo from '@/util/companyInfo'
export default {
  name: 'PurchaseAgreement',
  data() {
    return {
      config: {
        appName: name,
        contactPhone: companyInfo.phone,
        officeAddress: companyInfo.address,
        companyName: companyInfo.name,
        contactPerson: ""
      },
     
    }
  },
  methods: {
    callPhone(){
      uni.makePhoneCall({
        phoneNumber: this.config.contactPhone
      })
    }
  }
}
</script>

<style scoped lang='scss'>
.agreement-container {
  min-height: 100vh;
  background: #f8fafd;
  padding: 0 20rpx;
  box-sizing: border-box;
}

.agreement-content {
  background: #fff;
  border-radius: 16rpx;
  margin: 20rpx 0;
  padding: 32rpx 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
}

.agreement-header {
  text-align: center;
  margin-bottom: 40rpx;
  padding-bottom: 32rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.main-title {
  display: block;
  font-size: 36rpx;
  font-weight: 600;
  color: #222;
  margin-bottom: 24rpx;
  line-height: 1.4;
}

.date-info {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
  
  text {
    font-size: 24rpx;
    color: #999;
    line-height: 1.4;
  }
}

.agreement-body {
      span{
    color: $uni-color-primary !important;
    text-decoration: underline;
 }
  .section {
    margin-bottom: 32rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  .section-title {
    display: block;
    font-size: 32rpx;
    font-weight: 600;
    color: #222;
    margin-bottom: 24rpx;
    line-height: 1.4;
  }
  
  .subsection {
    margin-bottom: 20rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  .section-text {
    display: block;
    font-size: 28rpx;
    color: #333;
    line-height: 1.6;
    margin-bottom: 16rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .number {
  
      font-weight: 600;
      margin-right: 8rpx;
    }
  }
  
  .list-item {
    margin: 16rpx 0;
    padding-left: 20rpx;
    
    .list-text {
      display: block;
      font-size: 26rpx;
      color: #666;
      line-height: 1.5;
      margin-bottom: 12rpx;
      position: relative;
      
      &:before {
        content: '•';
        position: absolute;
        left: -16rpx;
  
        font-weight: bold;
      }
      
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

.u-flex {
  display: flex;
  align-items: center;
  

}

.app-bottom-paddig {
  padding-bottom: 120rpx;
}

.table {
  width: 100%;
  border-radius: 8rpx;
  overflow: hidden;
  margin-bottom: 32rpx;
  border: 1rpx solid #e5e5e5;
  background: #fafbfc;
}
.table-row {
  display: flex;
  border-bottom: 1rpx solid #e5e5e5;
  &:last-child {
    border-bottom: none;
  }
}
.table-header {
  background: #f0f2f5;
  font-weight: bold;
}
.table-cell {
  font-size: 26rpx;
  color: #333;
  border-right: 1rpx solid #e5e5e5;
  word-break: break-all;
  padding: 18rpx 12rpx;
}
.table-row {
  display: flex;
}
.table-header {
  background: #f0f2f5;
  font-weight: bold;
}
.table-cell:first-child {
  flex: 0 0 130rpx;
  max-width: 130rpx;
  min-width: 130rpx;
  text-align: center;
}
.table-cell:not(:first-child) {
  flex: 1 1 0;
}
.table-cell[rowspan] {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafd;
}
.table-cell[style*='writing-mode'] {
  writing-mode: vertical-lr;
  text-align: center;
  font-size: 24rpx;
  letter-spacing: 2rpx;
}

.table-grid {
  display: grid;
  grid-template-columns: 120rpx 120rpx 1.5fr 2fr;
  grid-template-rows: repeat(8, auto);
  background: #f8fafd;
  border-radius: 8rpx;
  overflow: hidden;
  border: 1rpx solid #e5e5e5;
  margin-bottom: 32rpx;
}
.cell {
  border-bottom: 1rpx solid #e5e5e5;
  border-right: 1rpx solid #e5e5e5;
  padding: 16rpx 8rpx;
  font-size: 26rpx;
  color: #333;
  background: #fff;
  min-height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.cell.header {
  background: #f0f2f5;
  font-weight: bold;
  color: #222;
}
.cell[style*='writing-mode'] {
  writing-mode: vertical-lr;
  text-align: center;
  font-size: 24rpx;
  letter-spacing: 2rpx;
}
.cell.product-name {
  font-size: 24rpx;
  font-weight: 500;
  letter-spacing: 2rpx;
}
</style>
